<template>
	<scroll-view scroll-x="true">
		<view class="tabbox tabWrap">
			<view class="tabItem" :class="{'selected':tabIndex==dt.id}" v-for="dt in lists" :key="dt.id" @click="setTab(dt)">{{dt.name}}</view>
		</view>
	</scroll-view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed,nextTick} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import {useStore} from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	export default defineComponent({
		components: {
			bodyWrap
		},
		props: {
			//lists:Array
		},
		setup(props, context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()

			const state = reactive({
				tabIndex:1,
				lists:[
					{id:1,name:'助餐'},
					{id:2,name:'助医'},
					{id:3,name:'助浴'},
					{id:4,name:'助洁'},
					{id:5,name:'助急'},
					{id:6,name:'助餐人体'},
					{id:7,name:'助浴方法'},
					{id:8,name:'打发打发'},
					{id:9,name:'发个梵蒂冈'},
					{id:10,name:'孤鸿寡鹄'},
				]
			})
			
			onMounted( async()=>{
				await nextTick()
				const kkk = await getEleInfo(proxy,'.tabWrap')
				console.log("kkk:",kkk)
			})
			
			// 获取html节点信息
			const getEleInfo = (proxy,ele,key)=>{
				return new Promise((resolve,reject) =>{
					let oView = uni.createSelectorQuery().in(proxy).select(".tabWrap");
					oView.fields({
					  size: true,
					  scrollOffset: true,
					}, res => {
						if(key){
							//return res[key]
							resolve(res[key])
						}else{
							resolve(res)
						}
					  console.log("得到节点信息" ,res);
					  console.log("节点的宽为" , res.width);
					}).exec();
				})
			}

			const setTab = (o)=>{
				state.tabIndex = o.id
			}
			return {
				...toRefs(state),
				setTab
			}
		}
	})
</script>

<style lang="scss" scoped>
	.tabbox {
		white-space:nowrap;
		display: inline-block;
		.tabItem {
			display: inline-block;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			white-space:nowrap;
			padding: 0 30rpx;
			&.selected{
				font-weight: 600;
				color: #f0aa3e;
			}
		}
	}
</style>